<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2976530_d7psrl2qfwi.css">
    <link rel="icon" href="img/京东-01.png">
    <style>
        .top {
            width: 100%;
            height: 60px;
            background-color: #83cbac;
        }

        .top span {
            height: 60px;
            line-height: 60px;
            float: left;
            margin-left: 100px;
            font-size: 16px;
        }

        .top ul {
            float: right;
            width: 1000px;
            height: 60px;
            line-height: 60px;
        }

        .top li {
            float: left;
            width: 200px;
            height: 60px;
            text-align: center;
            font-size: 16px;
        }

        .top ul a {
            float: left;
            width: 200px;
            height: 60px;
        }

        .top ul li:hover a {
            background-color: #1a6840;
            color: white;
        }

        .daohan {
            width: 100%;
            height: 44px;
        }

        .daohan input {
            margin-left: 500px;
            width: 360px;
            height: 40px;
            font-size: 20px;
        }

        .daohan i {
            font-size: 24px;
            cursor: pointer;

        }

        .listt li {
            width: 158px;
            padding: 10px;
            margin: 10px;
            border: 1px solid #fff;
            float: left;
            margin-left: 50px;
            margin-top: 20px;
        }

        .goodsprice {
            color: red;
        }

        .listt ul li:hover {
            box-shadow: 0 0 5px #ccc;
            border: 1px solid #eee;
        }

        .goodsintroduce {
            width: 120px;
            height: 34px;
            font-size: 12px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .hot {
            width: 94%;
            height: 30px;
            background-color: #eee;
            margin: 0 auto;
        }

        .hot span {
            display: inline-block;
            width: 60px;
            height: 30px;
            text-align: center;
            line-height: 30px;
        }

        .lisbot ul {
            width: 100%;
            height: 40px;
            float: left;
        }

        .lisbot li {
            line-height: 40px;
            text-align: center;
            width: 56px;
            height: 40px;
            float: left;
            padding: 0;
            margin-left: 20px;
            border: 1px dashed;
            background-color: #eee;
        }

        .lisbot ul input {
            width: 40px;
        }

        .lisbot ul li {
            cursor: pointer;
            margin-top: 30px;
        }

        .lisbot .active {
            background-color: #5698c3;
            color: white;
        }

        .dibu {
            overflow: hidden;
            height: 85px;
            background: #111b24;
            font-size: 12px;
            color: #9699a8;
            line-height: 24px;
            text-align: center;
            padding-top: 20px;
            margin-top: 418px;
            width: 100%;
        }

        .daohan input {
            margin-left: 500px;
            width: 360px;
            height: 30px;
            font-size: 20px;
            padding: 5px;
        }
    </style>
</head>

<body>
    <div class="top">
        <span style="cursor: pointer;">京东</span>
        <ul>
            <li class="login">
                <a href="登录.html">登录</a>
            </li>
            <li class="register">
                <a href="注册.html">注册</a>
            </li>
            <li>
                <a href="我的订单.html">我的订单</a>
            </li>
            <li>
                <a href="我的京东.html">我的京东</a>
            </li>
            <li>
                <a href="list.html">商品列表</a>
            </li>
        </ul>
    </div>
    <div class="daohan">
        <div>
            <input type="text" placeholder="请输入你想搜索的关键字">
            <i class="iconfont icon-sousuo2"></i>
        </div>
    </div>
    <div class="hot">
        <span style="background-color:#5698c3;color: white;">热销</span>
        <span>折扣</span>
        <select name="zk" id="" style=" border:none;
      outline:none;">
            <option value="10">折扣类型</option>
            <option value="5">五折</option>
            <option value="6">六折</option>
            <option value="7">七折</option>
            <option value="8">八折</option>
            <option value="9">九折</option>
        </select>
        <span style="background-color: white;font-size: 14px;height: 16px;line-height: 16px;" class="hht">价格↑</span>
        <span style="background-color: white;font-size: 14px;height: 16px;line-height: 16px;" class="hhtt">销量↑</span>
    </div>
    <div class="listt">
        <ul>

        </ul>
        <div class="lisbot">
            <ul>

            </ul>
        </div>
    </div>
    <div class="dibu">
        <p>周帅帅集团能力有限公司</p>
        <p>周帅帅著</p>
        <p>京ICP备12003911号-6 &nbsp Copyright &copy2013-2019</p>
    </div>
</body>


<script>
    var ssp = document.querySelector('.hot .hht')
    var sspp = document.querySelector('.hot .hhtt')
    ssp.onclick = function () {
        if (ssp.innerText == '价格↑') {
            ssp.innerText = '价格↓'
        } else {
            ssp.innerText = '价格↑'
        }
    }
    sspp.onclick = function () {
        if (sspp.innerText == '销量↑') {
            sspp.innerText = '销量↓'
        } else {
            sspp.innerText = '销量↑'
        }
    }

    var span = document.querySelector('.top span')
    span.onclick = function () {
        location.href = '首页.html'
    }
    function getCookie(key) {
        var cookie = document.cookie;
        var arr = cookie.split('; ')
        for (var i = 0; i < arr.length; i++) {
            var brr = arr[i].split('=')
            if (brr[0] === key) {
                return brr[1]
            }
        }
    }
    var username = getCookie('username')
    console.log(username);

    // var sex = getCookie('sex')
    // console.log(sex);

    function setCookie(key, value, seconds) {
        var date = new Date()
        date.setTime(date.getTime() + seconds * 1000 - 8 * 3600 * 1000)
        document.cookie = key + '=' + value + ';expires=' + date
    }
    // 将cookie中的用户名显示在页面上
    if (username) {
        // 显示在页面上
        var loginLi = document.querySelector('.login');
        loginLi.innerHTML = `
    <a href="">欢迎尊贵的${username}</a>
    `

        var registerLi = document.querySelector('.register');
        registerLi.innerHTML = `
        <a href="javascript:;" class="logout">登出</a>
    `

        // 登出
        document.querySelector('.logout').onclick = function () {
            loginLi.innerHTML = `
            <a href="登录.html">登录</a>
        `
            registerLi.innerHTML = `
            <a href="注册.html">注册</a>
        `

            // 删除cookie - 重新设置cookie - 将失效的时间日期对象设置在上一秒
            setCookie('username', null, -1)
        }
    }
</script>
<script src="./js/jquery-3.6.0.js"></script>
<script src="./js/layer/dist/layer.js"></script>
<script src="tap.js"></script>

</html>